<template>
  <div class="s-box">
    <search
      @on-change="getResult"
      v-model="searchName"
      auto-scroll-to-top top="0"
      @on-focus="onFocus"
      @on-cancel="onCancel"
      @on-submit="onSubmit"
      ref="search">
      <div class="stockList-content" :class="[stockList.length>0?'noEmpty':'']">
        <div class="stockList-item" v-for="item in stockList" @click="resultClick(item)">
          <p> {{item.searchName}}</p>
          <!--<p> {{item.productName}}</p>-->
          <button class="text-red text-large">添加</button>
        </div>
      </div>

    </search>
    <div :class="[isFocus?'isFocus':'']" v-show="!(stockList.length>0)">
      <div class="stockList-item" v-for="item in defaultStockList" @click="resultClick(item)">
        <p> {{item.productName}}</p>
        <!--<p> {{item.productName}}</p>-->
        <button class="text-red text-large">添加</button>
      </div>
    </div>

  </div>
</template>

<script>
  import {Search, Group, Cell, XButton} from 'vux'

  export default {
    components: {
      Search,
      Group,
      Cell,
      XButton
    },
    data() {
      return {
        stockList: [],
        defaultStockList: [],
        searchName: '',
        isFocus: false
      }
    },
    created() {
      this.getDefaultProduct();
    },
    methods: {
      getDefaultProduct() {
        this.$api.getDefaultProduct().then(data => {
          this.defaultStockList = data.stockList;
        })
      },
      searchProductName() {
        this.$api.searchProductName({
          searchName: this.searchName
        }).then(data => {
          this.stockList = data.stockList;
        })
      },
      setFocus() {
        this.$refs.search.setFocus()
      },
      resultClick(item) {
        this.$router.push({
          path: '/user/positionBusiness',
          query: {
            financialProductId: item.financialProductId,
            type: 'add'
          }
        })
      },
      getResult(val) {
        val ? this.searchProductName() : this.stockList = []
      },
      onSubmit() {
        this.$refs.search.setBlur();
      },
      onFocus() {
        console.log('on focus');
        this.isFocus=true
      },
      onCancel() {
        console.log('on cancel');
        this.isFocus=false;

      }
    }

  }
</script>
<style lang="less" scoped>
  .stockList-content {
    /*text-align: left;*/
    background-color: #fbf9fe;
  }

  .stockList-content.noEmpty {
    padding-bottom: 2rem;

  }

  .isFocus {
    margin-top: 44px;

  }

  .stockList-item {
    /*text-align: left;*/
    background-color: #fff;
    height: 1.6rem;
    line-height: 1.6rem;
    padding: .1rem .4rem;
    border-bottom: 1px solid #ccc;
    position: relative;
    p {
      font-size: 17px;
      /*height: 1.4rem;*/
      /*line-height: 1.4rem;*/
    }
    button {
      position: absolute;
      top: .4rem;
      right: .4rem;
      height: .8rem;
      width: 2rem;
      border: 1px solid #ec1c24;
      background-color: #fff;
    }
  }
</style>
